<template>
    <view class="userdetails">
        <div class="top">
            <u-image src="../../static/businessImg/back.png" width="16rpx" height="29rpx" @click="back"></u-image>
            <div class="topbackname">店铺数据</div>
        </div>
        <view class="dateview">
            <view class="datadiv">
                <uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至" />
            </view>
            <view class="databtn" @click="goToselectByTime">
                查询
            </view>
        </view>
        <div class="selectview">
            <div v-for="item in selectList" :key="item.id" @click="handleSelectClick(item)"
                :class="activeId == item.id ? 'selectitem active' : 'selectitem'">
                {{item.name}}
            </div>
        </div>
        <div class="dataview">
            <div class="dataviewitem">
                <div class="dataname">店铺浏览量</div>
                <div class="datamath">{{storeData.viewNums || 0}}</div>
            </div>
            <div class="dataviewitem">
                <div class="dataname">下单数</div>
                <div class="datamath">{{storeData.orderNum || 0}}</div>
            </div>
            <div class="dataviewitem">
                <div class="dataname">订单金额</div>
                <div class="datamath">{{storeData.orderPrice || 0}}</div>
            </div>
            <div class="dataviewitem">
                <div class="dataname">转化率</div>
                <div class="datamath">{{ storeData.transform || 0}}</div>
            </div>
        </div>
    </view>
</template>

<script>

import { newStoreData } from '@/api/storeAdmin.js'
import storage from "@/utils/storage.js";
export default {
    data() {
        return {

            selectList: [{
                id: 1,
                name: '今日数据'
            }, {
                id: 2,
                name: '本周数据'
            }, {
                id: 3,
                name: '本月数据'
            }],

            activeId: 1,

            datetimerange: [],

            storeData: {}

        }
    },



    mounted() {

        this.getData();
    },


    methods: {
        back() {
            uni.navigateBack();
        },

        goToselectByTime() {
            this.activeId = 4;
            this.getData()
        },

        handleSelectClick(current) {
            if (this.activeId == current.id) return
            this.$set(this, 'activeId', current.id);
            this.datetimerange = []
            this.getData()
        },

        // 查询店铺数据
        getData() {
            newStoreData({
                storeId: storage.getUserInfo().storeId,
                type: this.activeId,
                startTime: this.datetimerange[0] || "",
                endTime: this.datetimerange[1] || ''
            }).then(res => {
                if (res.code == '000000') {
                    this.storeData = res.data
                }
            })
        }
    },

}
</script>

<style scoped>
.dateview {
    width: 100%;
    height: 99rpx;
    display: flex;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2rpx solid #f3f3f3;
    border-bottom: 2rpx solid #f3f3f3;
}

.datadiv {
    width: 548rpx;
}

.databtn {
    height: 67rpx;
    width: 126rpx;
    line-height: 67rpx;
    text-align: center;
    background: rgb(148, 207, 57);
    font-family: PingFang;
    font-weight: 500;
    font-size: 29rpx;
    color: #FFFFFF;
}

.userdetails {
    width: 100%;
    min-height: 100vh;
    background: #F9FAFB;
    padding-bottom: 50rpx;
}

.top {
    width: 100%;
    height: 183rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 106rpx 28rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.topbackname {

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 33rpx;
    color: #222222;

}


.selectview {
    width: 100%;
    height: 130rpx;
    padding: 0 55rpx 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.selectitem {
    width: 196rpx;
    height: 55rpx;
    line-height: 55rpx;
    text-align: center;


    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 36rpx;
    color: #4A4A4A;

}

.active {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
    background: url("../../static/businessImg/bgselect.png") no-repeat center center/100% 100%;
}

.dataview {
    width: 100%;
    height: 500rpx;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    margin-top: 37rpx;
}

.dataviewitem {
    width: 317rpx;
    height: 239rpx;
    background: rgb(239, 241, 246);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: start;
}

.dataname {
    width: 100%;
    height: 29rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 38rpx;
    color: #646464;
    line-height: 29rpx;
    ;
    padding: 43rpx 0 56rpx;

    padding-left: 22rpx;

}

.datamath {

    padding-left: 22rpx;
    width: 100%;
    height: 31rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 66rpx;
    color: #222222;
    line-height: 31rpx;
}

.ordertitle {
    height: 33rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 36rpx;
    color: #000000;
    line-height: 33rpx;
    padding-left: 30rpx;
    margin-top: 49rpx;
}

.orderitem {
    width: 100%;
    background: rgb(245, 245, 245);
    height: 270rpx;
    margin-top: 17rpx;
    position: relative;
}

.orderimg {
    width: 244rpx;
    height: 244rpx;
    position: absolute;
    top: 15rpx;
    left: 25rpx;
}

.ordername {
    width: 386rpx;
    height: 75rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 40rpx;
    position: absolute;
    top: 15rpx;
    left: 285rpx;
}

.math {
    width: 100rpx;
    height: 19rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 25rpx;
    color: #A1A1A1;
    line-height: 19rpx;
    position: absolute;
    top: 101rpx;
    left: 285rpx;
}

.orderprice {
    width: 300rpx;
    height: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 31rpx;
    color: #222122;
    line-height: 24rpx;
    position: absolute;
    top: 155rpx;
    left: 285rpx;
}

.ordertimetop {
    width: 350rpx;
    height: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #8B8B8B;
    line-height: 21rpx;
    position: absolute;
    top: 205rpx;
    left: 285rpx;
}

.ordertimebottom {
    width: 350rpx;
    height: 21rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 22rpx;
    color: #8B8B8B;
    line-height: 21rpx;
    position: absolute;
    bottom: 15rpx;
    left: 285rpx;
}

.ordercolor {
    color: #CD0303 !important;
}

.orderStaus {
    width: 100rpx;
    height: 29rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 30rpx;
    color: #46CF38;
    line-height: 29rpx;
    text-align: right;
    position: absolute;
    top: 122rpx;
    right: 23rpx;
}
</style>
